<template>
  <div class="container">
    <div class="header">
      <img src="../../assets/img/1.jpg" />
      <text>沐歌</text>
    </div>
    <div class="content">
      <div class="list" @click="jump('/blog')">
        <SvgIcon name="home" :size="iconSize" />
        <text>首页</text>
      </div>
      <div class="list" @click="jump('/contact')">
        <SvgIcon name="contact" :size="iconSize" />
        <text>联系博主</text>
      </div>
      <div class="list" @click="jump('/welfareCenter')">
        <SvgIcon name="smile" :size="iconSize" />
        <text>福利中心</text>
      </div>
      <div class="list" @click="jump('/')">
        <SvgIcon name="cat" :size="iconSize" />
        <text>关于博主</text>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { ref } from 'vue'
  import SvgIcon from '@comp/SvgIcon/index.vue'
  const iconSize = ref<number>(26)
  const router = useRouter() //路由实例
  // 跳转方法
  const jump = (path: string) => {
    console.log(path, 231)
    router.push(path)
  }
</script>
<style lang="scss" scoped>
  .container {
    height: 100%;
    width: 100%;
    background-color: $dra-bgColor;

    .header {
      @include paddingLeft(30px);

      height: $dra-header-height-size;
      width: 100%;
      display: flex;
      align-items: center;

      > img {
        height: $dra-header-img-size;
        width: $dra-header-img-size;
        border-radius: 50%;
        border: 1px solid #eee;
      }

      > text {
        @include paddingLeft;

        color: #ffeaf0;
        font-size: $dra-header-text-size;
        font-weight: 600;
      }
    }

    .content {
      .list {
        @include paddingLeft(10%);

        height: $dra-list-height;
        width: 100%;
        border-top: 1px solid $dra-boder-color;
        border-bottom: 1px solid $dra-boder-color;
        display: flex;
        align-items: center;

        > text {
          @include paddingLeft;

          font-size: $dra-text-size;
          color: $dra-color;
        }
      }
    }
  }
</style>
